<!-- 最简单的弹出框 -->
<template>
	<div>
		<el-dialog
			:title="title"
			:visible="true"
			:width="dialogWidth + 'px'"
			:before-close="dialogClose"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			:modal="modal == true ? false : true"
		>
			<slot></slot>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "customDialog",
		props: {
			/** 标题 */
			title: {
				type: String,
				require,
			},
			modal: {
				type: Boolean,
			},
			// 尺寸：
			size: {
				// mini = 360,
				// tiny = 540,
				// small = 720,
				// large = 1080,
				// max = 1280,
				// fullscreen = window.screen.width
				type: String,
				require,
			},
		},
		computed: {
			dialogWidth() {
				let dWidth = 360
				if (this.size == "mini") dWidth = 360
				if (this.size == "tiny") dWidth = 540
				if (this.size == "small") dWidth = 720
				if (this.size == "large") dWidth = 1080
				if (this.size == "max") dWidth = 1280
				if (this.size == "fullscreen") dWidth = window.screen.width
				return dWidth
			},
		},
		methods: {
			/** 关闭弹窗 */
			dialogClose() {
				this.$emit("dialogClose", "close")
			},
			/** 确定弹窗 */
			dialogSure() {
				this.$emit("dialogSure", "ok")
			},
		},
	}
</script>

<style></style>
